<template>
    <div class="contion">
        <div class="work-list-box">
            <div class="work-list">
                <router-link to="/work">
                    <span>添加工作流</span>
                </router-link>
            </div>
            <div class="work-list" v-for="(j,k) in worklist" :key="k">
                <div v-if="j.id ===1">
                    <router-link to="/vacation">{{ j.name }}</router-link>
                </div>
                <div v-if="j.id ===2">
                    <router-link to="/rest">{{ j.name }}</router-link>
                </div>
                <div v-if="j.id ===3">
                    <router-link to="">{{ j.name }}</router-link>
                </div>
            </div>
            <div class="work-list">
                <router-link to="/review">
                    <span>任务审核</span>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';
const router = useRouter();

let worklist = ref([]);

const getWorkList = () => {
    http.get('/work/').then(res => {
        worklist.value = res.data;
        console.log(worklist.value);
    })
}

onMounted(() => {
    getWorkList();
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
}

.work-list-box{
    display: flex;
    flex-direction: row;
    grid-template-columns: repeat(3, 1fr); /* 根据需要调整列数 */
    display: grid;
    gap: 10px;
}

.work-list{
    width: 100px;
    height: 50px;
    border-radius: 15px;
    border: 1px solid #fff;
    text-align:center;
    padding-top: 20px;
    background-color: aliceblue;
    margin: 10px;
}

a{
    text-decoration: none;
    color: #000;
}
</style>